<template>
  <div id="board-view">
		<dv-full-screen-container>
			<top-header/>
      <dv-border-box-1 class="main-content">
        <div class="first-floor">
         <board-first-charts/>
        </div>
         <div class="second-floor">
             <board-second-left-charts/>
            <board-second-center-charts/>
            <board-second-right-charts/>
        </div>

      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
 import topHeader from './board/topHeader.vue'
 import boardFirstCharts from './board/boardFirstCharts.vue'
 import boardSecondLeftCharts from './board/boardSecondLeftCharts.vue'
 import boardSecondCenterCharts from './board/boardSecondCenterCharts.vue'
 import boardSecondRightCharts from './board/boardSecondRightCharts.vue'
export default {
	name: 'BoardView',
		components: {
      topHeader,
      boardFirstCharts,
      boardSecondLeftCharts,
      boardSecondCenterCharts,
      boardSecondRightCharts
    }
}
</script>

<style lang="less">
#board-view {
		width: 100%;
		height: 100%;
		background-color: #030409;
		color: #fff;

		#dv-full-screen-container {
			//background-image: url('./img/bg.png');
background-image: url('./img/Screen062301.jpg');
      //background-color: #030633;
			background-size: 100% 100%;
			box-shadow: 0 0 3px blue;
			display: flex;
			flex-direction: column;
		}

    	.main-content {
			flex: 1;
			display: flex;
			flex-direction: column;
      height: 90%;
		}
     .first-floor{
      position: relative;
      flex: 1;
			display: flex;
      height: 60%;
			box-sizing: border-box;
      flex-direction: row ;
      margin: 20px;
    }
    .second-floor{
      position: relative;
      flex: 1;
      height: 30%;
			display: flex;
			box-sizing: border-box;
      flex-direction: row;
      margin: 20px;
    }

  }
</style>
